<template>
<div>
  <!--配合表单使用-->
  <x-form
      ref="xForm"
      :label-width="'80px'"
      :form="form"
      :rules="rules"
      :formItemConfig="formConfig"
      :marginBottom="'20px'"
  >
  </x-form>
</div>
</template>

<script>
export default {
  name: "XForm",
  data() {
    return {
      // 表单相关
      form: {},
      rules: {},
      formConfig: [
        {
          label: "账号",
          inputType: "text",
          prop: "zh",
          type: "input",
          placeholder: "请输入账号",
          rule: true,
        },
        {
          type: "select",
          prop: 'gjz',
          lableWidth: "60",
          width: 180,
          placeholder: "请输入ID/名称",
          options:[]
        },
      ]
    }
  },
  /**
    *  formItemConfig :
    *  type:  input/select/button/datePicker/checkbox/radio  输入 选择器 按钮 日期选择(单日期或者多日期) 多选框 单选框
    *  label: string  左侧名
    *  rule:  boolean  是否激活Prop 默认 null
    *  prop:  string   每一个item 都必选要传的对象
    *  placeholder: string  提示语  默认  请输入
    *  disabled: boolean  是否禁用  默认 false
    *  inputType:  string  输入框的类型  默认 text
    *  showPassword:  boolean  是否显示密码框  默认 false
    *  width: string 该item的宽度
    *  method: string 触发的函数名 input 是bulr 事件其他大多是 change 事件
    *  addParams: any 配置事件触发后可以任意携带的参数
    *  options: Array 传入的数组
    *  clearable：boolean 是否可以清除 默认 false
    *  multiple: boolean 是否可以多选 默认 false
    *  allowCreate：boolean 是否可以创建新子集 默认 false
    *  filterable: boolean 是否可以搜索 默认 true
    *  optionValue: string 想要绑定的value名 默认是 value
    *  optionLabel: string 想要绑定的label名 默认是 label
    *  btnType: string el-tutton样式 默认 primary
    *  dateType: string 日期选择器的类型 默认 date
    *  format: string 选择器上显示的内容 默认 yyyy-MM-dd
    *  valueFormat： string 选中的值的内容 默认 yyyy-MM-dd
    *  defaultTime: string || Array  选择器的默认值 默认 null
    *  checkBoxList: Array 多选框数组
  * */
}
</script>

<style lang="scss" scoped>

<style>
//<!-- 为防止污染 xform 还添加了额外的class类 使用方式如下-->
.x_form_input {
  .el-input,
  .el-input__inner {
    background-color: transparent !important;
    border: none;
    border-bottom: 1px #464646 solid;
    border-radius: 0px;
    font-size: 18px;
    &::placeholder {
      color: #616161;
      font-size: 16px;
    }
  }
  .el-input__suffix {
    .el-input__icon {
      color: #464646;
    }
  }
}
.x_form_item {
  .el-form-item__label {
    font-size: 18px;
    color: #464646;
    &::before {
      display: none;
    }
  }
  .el-form-item__content {
    .el-form-item__error {
      font-size: 15px;
    }
  }
}
</style>
</style>
